<template>
  <div class="personal-container">
    <div class="personal-head" v-show="!isRedact">
      <div class="personal-head-img">
        <img src="static/bj.png">
      </div>
      <div class="user-info">
        <div class="user-phone">{{userPhone}}</div>
        <div class="user-avatar">
          <img :src="currentUser.photo">  
        </div> 
      </div>
      <div class="personal-tab">
        <div :class="{tabItem:true,active:isOrder=='0'}" @click="changeTab('0')">我的资料</div>
        <div :class="{tabItem:true,active:isOrder=='1'}" id="wdorder" onclick="_hmt.push(['_trackEvent', 'myorder', 'click', 'wdorder'])" @click="changeTab('1')">我的订单</div>
        <div :class="{tabItem:true,active:isOrder=='2'}" @click="changeTab('2')">我的课程</div>
      </div>
    </div>
    <div class="personal">
      <!-- <div class="personal-btn">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{isOrder =='0' ? '我的资料' : '我的订单'}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="myTab">
        <p :class="{tabItem:true,active:isOrder=='0'}" @click="changeTab('0')">我的资料</p><p :class="{tabItem:true,active:isOrder=='1'}" @click="changeTab('1')">我的订单</p>
      </div> -->
      <!-- 我的资料 -->
      <about-me v-if="isOrder=='0'" :userD='userData'  name="info" @redact = "showHead"></about-me>
      <!-- 我的订单 -->
      <my-order v-if="isOrder=='1'" :orderD='userData' name="order"></my-order>
      <!-- 我的课程 -->
      <my-course v-if="isOrder=='2'" :courseD='userData' name="course"></my-course>
    </div>
  </div>
</template>

<script>
import {
  fileUpload,
  userInfo,
  updateInfo,
  orderByUser,
  checkNickName,
  infoByTel
} from 'api/getData';
import aboutMe from './aboutMe.vue'
import myOrder from './myOrder.vue'
import myCourse from './myCourse.vue'
import {
  mapGetters,
  mapActions
} from 'vuex';
export default {
  name: 'personal',
  created() {
    let that = this
    this.$set(that.userData, 'type', that.User.type)
    this.$set(that.userData, 'cluesOrStuId', that.User.cluesOrStuId)
    this.setUserStatus();
  },
  data() {
    return {
      isRedact: false,
      orderData: [],
      userData: {
        type: '',
        cluesOrStuId: 0
      }
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'currentUser']),
    User() {
      return this.$store.state.currentUser;
    },
    isOrder() {
      return this.$route.query.flag;
    },
    userPhone() {
      let phone3 = this.currentUser?this.currentUser.account.slice(0,3).toString():'0000'
      let phone4 = this.currentUser?this.currentUser.account.slice(7).toString():'0000'
      return phone3 +'****'+ phone4;
    }
  },
  components: {
    aboutMe,
    myOrder,
    myCourse
  },
  methods: {
    ...mapActions(['setUser']),
    setUserStatus() {
      if (this.isLogin) {
        infoByTel(this.currentUser.account).then(res => {
          this.currentUser.type = res.data.type;
          this.currentUser.cluesOrStuId = res.data.cluesOrStuId;
          this.setUser(this.currentUser)
        })
      }
    },
    changeTab(isOrder) {
      this.$router.replace({
        path: '/personal',
        query: {
          flag: isOrder
        }
      })
    },
    showHead(is) {
      this.isRedact = is;
    }
  },
}

</script>

<style lang="stylus" scoped>
@import '~style/base.styl';
.personal-container{
  background-color:rgba(245,245,245,1);
}
.personal-head{
  background:rgba(255,255,255,1);
  .personal-head-img{
    width: 100%;
    height: 320px;
    overflow: hidden;
    img{
      min-width: 1920px;
      width: 100%;
      height: 100%;
    }
  }
  .user-info{
    position: relative;
    padding: 80px 0;
    .user-phone{
      margin: 0 auto;
      text-align: center;
      font-size:26px;
      color:rgba(32,32,32,1);
      line-height:26px;
    }
    .user-avatar{
      width:96px;
      height:96px;
      position: absolute;
      top: -48px;
      left: 50%;
      margin-left: -48px;
      
      
      img{
        width: 100%;
        height: 100%;
        border: 4px solid rgba(255,255,255,1);
        border-radius: 50%;
      }   
    }
  }
}
.personal-tab {
  width:100%;
  height:64px;
  text-align: center;
  background:rgba(255,255,255,1);
  // margin-bottom: 60px;
  div {
    display: inline-block;
    padding: 23px 0 21px;
    margin: 0 26px;
    font-size:18px;
    line-height:18px;
    text-align: center;
    color: $color-person-text;
    cursor: pointer;

    &:hover {
      color:rgba(255,98,82,1);
      border-bottom: 2px solid rgba(255,98,82,1); 
    }

    &.active {

      color:rgba(255,98,82,1);
      border-bottom: 2px solid rgba(255,98,82,1); 
    }
  }
}
.personal {
  width: 1200px;
  margin: 0 auto ;
  padding-top: 30px;
  padding-bottom: 120px;
  margin-top: 60px;
  
}
</style>
